import { useCallback, useEffect, useState } from 'react'
import styles from './index.module.less'
import { StatusTypeEnum, StatusObjectType, StatusTypeDataType } from './types.ts'
import { Flex } from 'antd'

const useStatusTag = (statusType: StatusTypeEnum) => {
  const [statusTypeData, setStatusTypeData] = useState<StatusTypeDataType>()

  // 获取状态类型数据
  const getStatusTypeData = useCallback(async () => {
    const { [statusType]: moduleToImport } = await import('./statusTypeMaps')
    setStatusTypeData(moduleToImport)
  }, [statusType])

  useEffect(() => {
    getStatusTypeData()
  }, [getStatusTypeData])

  // 获取valueEnum
  const getValueEnum = () => {
    const _valueEnum = Object.keys(statusTypeData ?? {}).reduce((acc: any, key: any) => {
      acc[key] = statusTypeData?.[key].text
      return acc
    }, {})
    console.log('valueEnum:', _valueEnum)
    return _valueEnum
  }

  // RENDER FN
  function renderStatusTag(status: number) {
    const renderInfo: StatusObjectType | undefined = statusTypeData?.[status]
    return renderInfo ? (
      <Flex className={styles['status-tag']} style={renderInfo.style} align="center" wrap="nowrap">
        {renderInfo.icon}
        <span className={styles['status-text']}></span>
        {renderInfo.text}
      </Flex>
    ) : (
      ''
    )
  }

  return {
    renderStatusTag,
    getValueEnum
  }
}

export default useStatusTag
